<template>
  <div class="os-main">
    <ConfigForm v-model="dataForm" :config="config" ref="configFormRef" />

    <el-button type="primary" @click="openJson">查看表单数据</el-button>

    <el-drawer v-model="drawerVisiable" title="数据视图" :direction="'rtl'" size="40%">
      <CodeView :code-json="JSON.stringify(dataForm, null, '\t')"></CodeView>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import type { Config } from '@/components/ConfigForm'
import { ElIcon, ElButton } from 'element-plus';
import { Search } from '@element-plus/icons-vue'
import Demo10 from './components/Demo10.vue'
import { ref, h, markRaw } from 'vue';
import CodeView from '@/components/CodeView/index.vue'
import ConfigForm from '@/components/ConfigForm/index'

/**ConfigForm绑定对象 */
const dataForm = ref<ObjectAny>({})

/**ConfigForm配置 */
const config = ref<Config>({
  mode: 'add',
  formProps: {},
  rowProps: {},
  columns: [
    { prop: 'demo1', label: '基础用法', type: 'input' },
    { prop: 'demo2', label: '禁用状态', type: 'input', props: { disabled: true } },
    { prop: 'demo3', label: '一键清空', type: 'input', props: { clearable: true } },
    { // 格式化
      prop: 'demo4', label: '格式化', type: 'input',
      props: {
        formatter: (value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
        parser: (value: string) => value.replace(/\$\s?|(,*)/g, '')
      }
    },
    { prop: 'demo5', label: '带图标的输入框', type: 'input', props: { suffixIcon: 'Calendar' } },
    {
      prop: 'demo6', label: '带图标的输入框(slot)', type: 'input',
      slots: { prefix: h(ElIcon, {}, () => h(Search)) }
    },
    { prop: 'demo7', label: '文本域', type: 'input', colProps: { span: 24 }, props: { type: 'textarea' } },
    { prop: 'demo8', label: '复合型输入框', type: 'input', slots: { prepend: 'Http://' } },
    {
      prop: 'demo9', label: '复合型输入框(附带搜索)', type: 'input', events: { keyup: () => { console.log('demo9 keyup') } },
      slots: { append: h(ElButton, { icon: 'Search', onclick: () => { console.log('demo9 click') } }) }
    },
    { // 复合型输入框(附带选项与搜索)
      prop: 'demo10', label: '复合型输入框(附带选项与搜索)', type: 'custom',
      is: markRaw(Demo10),
      props: { dataForm },
      events: {
        keyup: () => { console.log('demo10 keyup') },
        change: (key: string, val: string) => { dataForm.value[key] = val }
      }
    },
  ]
})

// 数据视图
const drawerVisiable = ref(false)
const openJson = () => {
  drawerVisiable.value = true
}
</script>
